<template>
  <view class="bill-wrap">
    <!-- #ifdef MP-WEIXIN -->
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />
    <!-- #endif -->
    <view class="bg-white" v-if="cate == 0">
      <uv-tabs
        activeColor="#f29100"
        ref="tabs"
        :list="list"
        :current="current"
        @change="change"
        :scrollable="false"
        swiperWidth="750"
      ></uv-tabs>
    </view>
    <view class="bg-white" v-else>
      <uv-tabs
        activeColor="#f29100"
        ref="tabs"
        :list="list1"
        :current="current"
        @change="change"
        :scrollable="false"
        swiperWidth="750"
      ></uv-tabs>
    </view>
    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <scroll-view
          class="swiper-item__content"
          scroll-y
          @scrolltolower="reachBottom"
        >
          <view>
            <view v-if="item.length == 0">
              <view class="centre" v-if="loadStatus[index] != 'loading'">
                <view class="explain">
                  {{ currentLanguageTexts.noOrderTip1 }}
                  <view class="tips">{{
                    currentLanguageTexts.noOrderTip2
                  }}</view>
                </view>
                <view class="btn">
                  <navigator open-type="switchTab" url="/pages/menu/menu">{{
                    currentLanguageTexts.lookAround
                  }}</navigator>
                </view>
              </view>
              <view v-else>
                <uv-load-more
                  :status="loadStatus[index]"
                  bgColor="#f2f2f2"
                  :loadingText="currentLanguageTexts.loading"
                  :nomoreText="currentLanguageTexts.noMore"
                  :loadmoreText="currentLanguageTexts.loadMore"
                ></uv-load-more>
              </view>
            </view>
            <view v-else>
              <view
                class="order"
                v-for="(res, resIndex) in orderList[index]"
                :key="resIndex"
              >
                <view class="type">
                  <view>{{ res.title }}</view>
                  <view class="mt-1">{{ res.mark }}</view>
                </view>
                <view class="total">
                  <view>
                    {{ res.pm == 0 ? '-' : '＋' }}${{ res.number
                    }}{{ currentLanguageTexts.yuan }}
                  </view>
                  <view class="mt-1">
                    {{ formatDateTime(res.createTime) }}
                  </view>
                </view>
              </view>
              <uv-load-more
                :status="loadStatus[index]"
                :loadingText="currentLanguageTexts.loading"
                :nomoreText="currentLanguageTexts.noMore"
                :loadmoreText="currentLanguageTexts.loadMore"
              ></uv-load-more>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formatDateTime } from '@/utils/util';
import { balanceGetBillList } from '@/api/user';
const main = useMainStore();
const { isLogin, currentLanguageTexts } = storeToRefs(main);
const title = ref('账单');
const orderList = ref([[], [], [], []]);
const list = ref([
  {
    name: currentLanguageTexts.value.all,
    type: 0,
  },
  {
    name: currentLanguageTexts.value.consume,
    type: 1,
  },
  {
    name: currentLanguageTexts.value.refund,
    type: 3,
  },
  {
    name: currentLanguageTexts.value.recharge,
    type: 2,
  },
]);
const list1 = ref([
  {
    name: currentLanguageTexts.value.all,
    type: 0,
  },
  {
    name: currentLanguageTexts.value.consume,
    type: 1,
  },
]);
const current = ref(0);
const swiperCurrent = ref(0);
const tabsHeight = ref(0);
const dx = ref(0);
const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
const page = ref(1);
const pageSize = ref(1000);
const tabs = ref();
const cate = ref(0);
const type = ref(0);

onLoad((option) => {
  console.log('cate:', option);
  if (option.cate) {
    cate.value = option.cate;
  }
  if (option.type) {
    type.value = option.type;
    swiperCurrent.value = list.value.findIndex(
      (item) => item.type == option.type
    );
    current.value = swiperCurrent.value;
  }

  getBill();
});

const getBill = async () => {
  if (loadStatus.value[swiperCurrent.value] == 'loading') {
    return;
  }
  loadStatus.value.splice(swiperCurrent.value, 1, 'loading');
  let data = await balanceGetBillList({
    cate: cate.value,
    type: type.value,
    page: page.value,
    pagesize: pageSize.value,
  });
  if (page.value == 1) {
    orderList.value[swiperCurrent.value] = [];
  }
  if (data && data.length > 0) {
    page.value++;
    orderList.value[swiperCurrent.value] =
      orderList.value[swiperCurrent.value].concat(data);
    if (data.length < pageSize.value) {
      loadStatus.value.splice(swiperCurrent.value, 1, 'nomore');
      return;
    }
    loadStatus.value.splice(swiperCurrent.value, 1, 'loadmore');
  } else {
    loadStatus.value.splice(swiperCurrent.value, 1, 'nomore');
  }
};
const reachBottom = () => {
  if (loadStatus.value[swiperCurrent.value] == 'nomore') {
    return;
  }
  getBill();
};
// tab栏切换
const change = (e) => {
  swiperCurrent.value = e.index;
  type.value = e.type;
  page.value = 1;
};
const transition = ({ detail }) => {};
const animationfinish = ({ detail }) => {
  console.log('animationfinish:', detail);
  swiperCurrent.value = detail.current;
  current.value = detail.current;
  type.value = list.value[detail.current].type;
  page.value = 1;
  getBill();
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}
/* #endif */
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;

  .total {
    display: inline-block;
    text-align: right;

    .total-price {
      font-size: 36rpx;
    }
  }
  .type {
    display: inline-block;
  }
}
.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;
  image {
    width: 164rpx;
    height: 164rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }
  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }
  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: linear-gradient(
      270deg,
      rgba(249, 116, 90, 1) 0%,
      rgba(255, 158, 1, 1) 100%
    );
  }
}
.bill-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  overflow: hidden;
}
.swiper-box {
  flex: 1 0 0;
  overflow: hidden;
  height: 100%;
  .swiper-item {
    height: 100%;
  }
}
</style>
